<!--
Copyright 2015 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<ng-form layout="row"
         flex="auto"
         name="labelForm">
  <md-input-container md-no-float
                      class="kd-deploy-input-row"
                      flex="45">
    <input name="key"
           ng-model="labelCtrl.label.key"
           ng-change="labelCtrl.check(labelForm)"
           placeholder="{{labelCtrl.label.key}}"
           ng-disabled="!labelCtrl.label.editable"
           kd-validate="labelKeyNameLength,labelKeyPrefixLength,labelKeyNamePattern,labelKeyPrefixPattern"
           ng-model-options="{allowInvalid: true}">
    <ng-messages for="labelForm.key.$error"
                 ng-if="labelForm.key.$touched && labelForm.key.$invalid">
      <ng-message when="unique">
        {{::labelCtrl.getLabelKeyUniqueWarning()}}
      </ng-message>
      <ng-message when="kdValidLabelKeyPrefixPattern">
        [[Prefix is not a valid DNS subdomain prefix (eg. my-domain.com).|This warning appears when the key of a specified kubernetes label (on the deploy page) does not start with a proper prefix.]]
      </ng-message>
      <ng-message when="kdValidLabelKeyNamePattern">
        [[Label key name must be alphanumeric separated by '-', '_' or '.', optionally prefixed by a DNS subdomain and '/'.|This warning appears when the key name of a specified kubernetes label (on the deploy page) does not match the required pattern.]]
      </ng-message>
      <ng-message when="kdValidLabelKeyPrefixLength">[[Prefix should not exceed 253 characters.|This warning appears when the key prefix of a specified kubernetes label (on the deploy page) is too long.]]</ng-message>
      <ng-message when="kdValidLabelKeyNameLength">[[Label Key name should not exceed 63 characters.|This warning appears when the value of a specified kubernetes label (on the deploy page) does not match the required pattern.]]</ng-message>
    </ng-messages>
  </md-input-container>
  <p flex="5"></p>
  <md-input-container md-no-float
                      class="kd-deploy-input-row"
                      flex="40">
    <input name="value"
           ng-model="labelCtrl.label.value"
           placeholder="{{labelCtrl.label.value}}"
           ng-disabled="!labelCtrl.label.editable"
           kd-validate="labelValuePattern"
           ng-change="labelCtrl.check()"
           md-maxlength="253"
           ng-model-options="{ getterSetter: true, allowInvalid: true }">
    <ng-messages for="labelForm.value.$error"
                 ng-if="labelForm.value.$touched && labelForm.value.$invalid">
      <ng-message when="kdValidLabelValuePattern">
        [[Label value must be alphanumeric separated by '.' , '-' or '_'.|This warning appears when the value of a specified kubernetes label (on the deploy page) does not match the required pattern.]]
      </ng-message>
      <ng-message when="md-maxlength">[[Label Value must not exceed 253 characters.|This warning appears when the value of a specified kubernetes label (on the deploy page) is too long.]]</ng-message>
    </ng-messages>
  </md-input-container>
  <md-button type="button"
             ng-show="labelCtrl.isRemovable()"
             ng-click="labelCtrl.deleteLabel()"
             class="material-icons md-icon-button">delete
  </md-button>
</ng-form>
